<template>
  <div class="main">
    <img
      @click="$router.push('actstationadress')"
      class="actbtn"
      src="@/assets/images/recommend/btn.png"
      alt
    />
    <div class="content">
      <!-- <div @click="toshare()" class="firbtn">敬请期待</div> -->
      <div @click="toshare()" class="firbtn">邀请好友办理邮储银行市民卡(社会保障卡）</div>
      <div @click="bindcard()" class="twobtn">我要办理邮储银行市民卡(社会保障卡）</div>
      <div class="record" @click="$router.push('bindCard')">邀请办卡记录查询></div>
    </div>
    <div class="synopsis" :class="{'anosynopsis':alltoshow}">
      <img src="@/assets/images/recommend/citytitle.png" alt />
      <p class="ptext" :class="{'ptext1':alltoshow}">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;厦门市被人社部列入具有金融功能的第三代社会保障卡先行启动建设地区名单，原第一代社保卡将全部升级为第三代社会保障卡。根据厦门市政府关于市民卡建设工作任务要求，以第三代社会保障卡为载体，面向厦门市市民（已参保人员）发行市民卡（社会保障卡），可以实现多卡合一、一卡通用。
        市民卡（社会保障卡）除具备社会保障、金融、交通三大应用功能外，还可用于图书借阅（图书证）及轮渡购票，今后将不断拓展旅游、工会、公积金、养老、残联、优抚等其他行业应用。
        启动市民卡（社会保障卡）换发以后，不再制发第一代社保卡，市民卡（社会保障卡）与第一代社保卡在2021年底前可以并行使用，新增参保人员、挂失补换卡人员直接换发市民卡（社会保障卡）。2020年5月份试行发卡,发卡对象为新退休人员、挂失补换卡人员和新增参保人员，持有第一代社保卡的全市所有已退休人员需于2020年底前将第一代社保卡更换为市民卡（社会保障卡），2021年底前所有第一代社保卡需全部更换为市民卡（社会保障卡）。
      </p>
      <p class="ptwo" @click="alltoshow = !alltoshow">{{alltoshow?'收起':'展开全部'}}>>></p>
    </div>
    <div class="cityquanyi">
      <div @click="$router.push('/points-exp?code=0')" class="rulebtn">查看积分规则></div>
      <div @click="$router.push('/recommenddetail')" class="rulebtn1">查看活动详情></div>
    </div>
    <img class="snabu" src="@/assets/images/recommend/snabu.png" alt />
    <img class="snabu" src="@/assets/images/recommend/actguize.png" alt />
    <img
      class="detailscro"
      @click="$router.push('ruledetails')"
      src="@/assets/images/recommend/detail.png"
      alt
    />
    <!-- 弹窗 -->
    <div v-if="isbind" class="mask">
      <div class="user_phone">
        <div class="title">请输入信息</div>
        <div class="turn_off" @click="turnOff">
          <img src="@/assets/images//citizen/ggcha.png" alt />
        </div>
        <div class="phone">
          <img src="@/assets/images//citizen/ggname.png" alt />
          <input @blur="resetDiv" v-model="haveName" type="text" placeholder="请输入您的真实姓名" />
        </div>
        <p class="toline"></p>
        <div class="phone">
          <img src="@/assets/images//citizen/ggid.png" alt />
          <input
            maxlength="6"
            @blur="resetDiv"
            v-model="haveId"
            type="text"
            placeholder="请输入您身份证后6位"
          />
        </div>
        <p class="toline"></p>
        <div class="phone">
          <img src="@/assets/images//citizen/ggpicon.png" alt />
          <input
            @blur="resetDiv"
            v-model="haveNum"
            type="number"
            placeholder="请手机号码后6位"
            maxlength="6"
          />
        </div>
        <p class="toline"></p>
        <div class="bottom_text">
          <p>温馨提示：</p>
          <p>该信息作为邀请人识别号，请正确填写，若填写有误将影响活动积分发放/使用。</p>
        </div>
        <div class="sure_btn" @click="sureBtn">确定</div>
      </div>
    </div>
    <!-- 点击我要办卡弹窗没填过 -->
    <div v-if="isbind1" class="mask">
      <div class="user_phone1">
        <div class="title">请输入信息</div>
        <div class="turn_off" @click="turnOff1">
          <img src="@/assets/images//citizen/ggcha.png" alt />
        </div>
        <div class="phone">
          <img src="@/assets/images//citizen/ggname.png" alt />
          <input @blur="resetDiv" v-model="haveName" type="text" placeholder="请输入您的真实姓名" />
        </div>
        <p class="toline"></p>
        <div class="phone">
          <img src="@/assets/images//citizen/ggid.png" alt />
          <input
            maxlength="6"
            @blur="resetDiv"
            v-model="haveId"
            type="text"
            placeholder="请输入您身份证后6位"
          />
        </div>
        <p class="toline"></p>
        <div class="phone">
          <img src="@/assets/images//citizen/ggpicon.png" alt />
          <input
            @blur="resetDiv"
            v-model="haveNum"
            type="number"
            placeholder="请输入手机号码后6位"
            maxlength="6"
          />
        </div>
        <p class="toline"></p>
        <div class="phone">
          <img src="@/assets/images//citizen/ggid.png" alt />
          <select name="public-choice" v-model="severstation">
            <!-- <option value="请选择">请选择区域</option> -->
            <option :key="index" :value="item.value" v-for="(item,index) in severList">{{item.name}}</option>
          </select>
        </div>
        <p class="toline"></p>
        <div class="phone">
          <img src="@/assets/images//citizen/ggid.png" alt />
          <select name="public-choice" v-model="couponSelected">
            <option value="请选择">请选择服务网点</option>
            <option
              :key="index"
              :value="item.bankNo"
              v-for="(item,index) in couponList"
            >{{item.bankName}}</option>
          </select>
        </div>
        <p class="toline"></p>
        <div class="phone">
          <img src="@/assets/images//recommend/isretire.png" alt />
          <select name="public-choice" v-model="couponSelected2">
            <option value="请选择">请选择是否退休人员</option>
            <option
              :key="index"
              :value="item.isretire"
              v-for="(item,index) in couponList2"
            >{{item.isretire}}</option>
          </select>
        </div>
        <p class="toline"></p>
        <div class="phone">
          <img src="@/assets/images//recommend/getcard.png" alt />
          <select name="public-choice" v-model="couponSelected1">
            <option value="请选择">请选择领卡方式</option>
            <option
              :key="index"
              :value="item.station"
              v-for="(item,index) in couponList1"
            >{{item.station}}</option>
          </select>
        </div>
        <div class="bottom_text" v-if="warntoast">
          <p>温馨提示：</p>
          <p>
            领卡网点需与实际一致，若不一致将
            影响活动礼品/活动积分发放。
          </p>
        </div>
        <div class="bottom_text" v-if="warntoast1">
          <p>温馨提示：</p>
          <p>服务银行需选择邮储银行，否则将影响活动礼品/活动积分发放。</p>
        </div>
        <div class="sure_btn" @click="sureBtn1">确定</div>
      </div>
    </div>
    <!-- 点击我呀办卡弹窗填过信息 -->
    <!-- <div v-if="isbind2" class="mask">
      <div class="user_phone2">
        <div class="title">请输入信息</div>
        <div class="turn_off" @click="turnOff2">
          <img src="@/assets/images//citizen/ggcha.png" alt />
        </div>
        <p class="toline"></p>
        <p class="toline"></p>
        <div class="phone">
          <img src="@/assets/images//citizen/ggid.png" alt />
          <select name="public-choice" v-model="couponSelected">
            <option value="请选择">请选择</option>
            <option
              :key="index"
              :value="item.bankNo"
              v-for="(item,index) in couponList"
            >{{item.bankName}}</option>
          </select>
        </div>
        <p class="toline"></p>
        <div class="phone">
          <img src="@/assets/images//recommend/isretire.png" alt />
          <select name="public-choice" v-model="couponSelected2">
            <option value="请选择">请选择</option>
            <option
              :key="index"
              :value="item.isretire"
              v-for="(item,index) in couponList2"
            >{{item.isretire}}</option>
          </select>
        </div>
        <p class="toline"></p>
        <div class="phone">
          <img src="@/assets/images//recommend/getcard.png" alt />
          <select name="public-choice" v-model="couponSelected1">
            <option value="请选择">请选择</option>
            <option
              :key="index"
              :value="item.station"
              v-for="(item,index) in couponList1"
            >{{item.station}}</option>
          </select>
        </div>
        <div class="bottom_text" v-if="warntoast">
          <p>温馨提示：</p>
          <p>
            领卡网点需与实际一致，若不一致将
            影响活动礼品/活动积分发放。
          </p>
        </div>
        <div class="bottom_text" v-if="warntoast1">
          <p>温馨提示：</p>
          <p>服务银行需选择邮储银行，否则将影响活动礼品/活动积分发放。</p>
        </div>
        <div class="sure_btn" @click="sureBtn">确定</div>
      </div>
    </div>-->
    <!-- 分享 -->
    <div v-if="isshare" class="mask" @click="isshare = false">
      <img class="crow" src="@/assets/images/recommend/corm.png" alt />
      <p class="pcrow">转发好友或分享到朋友圈</p>
    </div>
  </div>
</template>
<script>
import { Toast } from 'vant';
import { baseUrl } from '@/config/env.js';
import weixin from '@/components/wx/wx.js';
export default {
  data() {
    return {
      isbind: false,
      isbind1: false,
      // isbind2: true,
      isshare: false,
      haveName: '',
      haveNum: '',
      haveId: '',
      authCode: '',
      havestation: '',
      second: '获取验证码',
      username: '',
      idCardNo: '',
      telphone: '',
      url: '',
      nickName: '',
      alltoshow: false,
      wtype: '',
      couponSelected: '',
      couponSelected2: '',
      couponSelected1: '',
      severstation: '',
      couponList: [],
      couponList1: [{ station: '邮寄' }, { station: '网点领取' }],
      couponList2: [{ isretire: '退休人员' }, { isretire: '非退休人员' }],
      warntoast: false,
      warntoast1: false,
      severList: [
        { name: '思明区', value: '1' },
        { name: '湖里区', value: '2' },
        { name: '集美区', value: '3' },
        { name: '同安区', value: '4' },
        { name: '海沧区', value: '5' },
        { name: '翔安区', value: '6' }
      ]
    };
  },
  created() {
    // this.geturl();
    this.getbank();
    this.$http.post('/tuser/userInfo', {}).then(res => {
      console.log(res);
      if (res.data.code === '0') {
        this.username = res.data.object.username;
        this.idCardNo = res.data.object.idCardNo;
        this.telphone =
          res.data.object.telphone.length > 6
            ? res.data.object.telphone.slice(5)
            : res.data.object.telphone;
        this.nickName = res.data.object.nickName;
        this.bankUserid = res.data.object.bankUserid;
      }
    });
    this.couponSelected = '请选择';
    this.couponSelected1 = '请选择';
    this.couponSelected2 = '请选择';
    this.severstation = '1';
  },
  mounted() {
    setTimeout(() => {
      this.initWxChat();
    }, 400);
    setTimeout(() => {
      window.scrollTo(0, 0);
    }, 100);
  },
  watch: {
    couponSelected1(value) {
      if (value === '网点领取') {
        this.warntoast = true;
        this.warntoast1 = false;
      } else if (value === '邮寄') {
        this.warntoast1 = true;
        this.warntoast = false;
      } else {
        this.warntoast = false;
        this.warntoast1 = false;
      }
    },
    couponSelected(val) {
      console.log(val);
      this.couponList.map(item => {
        if (item.bankNo === val) {
          this.getbankName = item.bankName;
        }
      });
    },
    severstation(val) {
      this.couponSelected = '请选择';
      this.$http
        .post('oneYuanPurchase/areaBankList', {
          area: val
        })
        .then(res => {
          this.couponList = res.data.object;
        });
    }
  },
  methods: {
    getbank() {
      // this.$http.post('oneYuanPurchase/bankList', {}).then(res => {
      //   if (res.data.code === '0') {
      //     console.log(res);
      //     this.couponList = res.data.object;
      //     console.log(this.couponList[0]);
      //   }
      // });
      this.$http
        .post('oneYuanPurchase/areaBankList', {
          area: '1'
        })
        .then(res => {
          this.couponList = res.data.object;
        });
    },
    // 获取分享后跳转地址
    geturl() {
      this.$http.post('/tuserBindcard/getInviteUrl', {}).then(res => {
        console.log(res);
        if (res.data.code === '0') {
          this.url = res.data.object.url;
          console.log('这是地址', this.url);
        }
      });
    },
    // 点击我要办理市民卡
    bindcard() {
      this.$http.post('tuserBindcard/bindInfo', {}).then(res => {
        console.log(res);
        if (res.data.code === '0') {
          if (this.username && this.idCardNo && this.telphone) {
            this.wtype = '1';
            this.haveName = this.username;
            this.haveId = this.idCardNo;
            this.haveNum = this.telphone;
            this.isbind1 = true;
            // window.location.href =
            //   'https://app.hrss.xm.gov.cn/SBServer/server/sbkbhk/index';
          } else {
            this.wtype = '1';
            this.isbind1 = true;
          }
        } else {
          window.location.href =
            'https://app.hrss.xm.gov.cn/SBServer/server/sbkbhk/index';
        }
      });

      // if (this.username && this.idCardNo && this.telphone) {
      //   this.wtype = '1';
      //   this.isbind1 = true;
      //   // window.location.href =
      //   //   'https://app.hrss.xm.gov.cn/SBServer/server/sbkbhk/index';
      // } else {
      //   this.wtype = '1';
      //   this.isbind = true;
      // }
    },
    // 点击分享弹窗
    toshare() {
      if (this.username && this.idCardNo && this.telphone) {
        // this.isshare = true;
        if (this.bankUserid) {
          this.$router.push('/cityqrcode');
        } else {
          this.$http
            .post('/tuserWhitlist/userCheckPass', {
              telphone: this.haveNum,
              idCardNo: this.haveId,
              username: this.haveName
            })
            .then(res => {
              console.log(res);
              if (res.data.code === '0') {
                this.$router.push('/cityqrcode');
              }
            });
        }
      } else {
        this.wtype = '2';
        this.isbind = true;
      }
    },
    initWxChat() {
      const url = window.location.href.split('#')[0];
      console.log('啦啦啦啦啊', this.url);
      const param = {
        title:
          '您的好友' + this.nickName + '邀请您办理邮储市民卡（社会保障卡）！',
        desc: '领取缤纷好礼，邀请好友成功办卡并激活可获20-50积分。',
        link: baseUrl + this.url,
        imgUrl: 'http://img.580travel.com/youchu/king.jpg',
        localUrl: url
      };
      weixin.wxChat(this, param);
    },
    // ios键盘顶起
    resetDiv() {
      setTimeout(() => {
        const scrollHeight =
          document.documentElement.scrollTop || document.body.scrollTop || 0;
        window.scrollTo(0, Math.max(scrollHeight - 1, 0));
      }, 100);
    },
    // 获取验证码
    toMessage(event) {
      window.scroll(0, 0);
      if (this.second === '获取验证码') {
        this.$http
          .post('/tuser/getSmsCode', {
            phone: this.haveNum,
            source: 0
          })
          .then(res => {
            if (res.data.code === '1') {
              console.log(res);
              Toast(res.data.message);
            } else {
              this.second = 60;
              this.itl = setInterval(() => {
                if (this.second > 0) {
                  this.second--;
                } else {
                  this.second = '获取验证码';
                  clearInterval(this.itl);
                }
              }, 1000);
            }
          });
      } else {
        Toast('您点的太快了');
      }
    },
    turnOff1() {
      this.isbind1 = false;
    },
    // turnOff2() {
    //   this.isbind1 = false;
    // },
    // 确定按钮
    sureBtn() {
      if (this.haveName === '' || /^\d{6}$/.test(this.haveNum) === false) {
        Toast('请输入正确的手机号码');
      } else if (this.haveId === '') {
        Toast('请输入正确的身份证号码');
      } else {
        this.$http
          .post('/tuserWhitlist/userCheckPass', {
            telphone: this.haveNum,
            idCardNo: this.haveId,
            username: this.haveName
          })
          .then(res => {
            console.log(res);
            if (res.data.code === '0') {
              this.isbind = false;
              this.$router.push('/cityqrcode');
              // setTimeout(() => {
              //   this.isshare = true;
              // }, 200);
              // window.location.href = ''
            } else {
              Toast(res.data.message);
            }
          });
      }
    },
    sureBtn1() {
      if (this.haveName === '' || /^\d{6}$/.test(this.haveNum) === false) {
        Toast('请输入正确的手机号码');
      } else if (this.haveId === '') {
        Toast('请输入正确的身份证号码');
      } else if (this.couponSelected === '请选择') {
        Toast('请选择网点');
      } else if (this.couponSelected1 === '请选择') {
        Toast('请选择领取方式');
      } else if (this.couponSelected2 === '请选择') {
        Toast('请选择是否为退休人员');
      } else {
        this.$http
          .post('/tuserBindcard/bindRecord', {
            type: '1',
            telphone: this.haveNum,
            idCardNo: this.haveId,
            username: this.haveName,
            bankId:
              this.couponSelected === '请选择'
                ? ''
                : this.couponSelected.toString(),
            bankName: this.couponSelected === '请选择' ? '' : this.getbankName,
            whitelistId: this.bankUserid ? this.bankUserid : '',
            receiveType:
              this.couponSelected1 === '请选择'
                ? ''
                : this.couponSelected1 === '邮寄'
                ? '1'
                : '2',
            isRetire:
              this.couponSelected2 === '请选择'
                ? ''
                : this.couponSelected2 === '退休人员'
                ? '1'
                : '0'
          })
          .then(res => {
            console.log(res);
            if (res.data.code === '0') {
              this.isbind1 = false;
              window.location.href =
                'https://app.hrss.xm.gov.cn/SBServer/server/sbkbhk/index';
              // setTimeout(() => {
              //   this.isshare = true;
              // }, 200);
              // window.location.href = ''
            } else {
              Toast(res.data.message);
            }
          });
      }
    },
    // 关闭验证信息弹窗
    turnOff() {
      this.isbind = false;
    }
  },
  components: {}
};
</script>

<style lang="scss" scoped>
.main {
  width: 100%;
  height: 6000px;
  background-image: url(../../../assets/images/recommend/bg1.jpg);
  background-size: 100% 100%;
  background-size: cover;
  background-repeat: no-repeat;
  .synopsis {
    width: 690px;
    height: 563px;
    background-color: #ffffff;
    border-radius: 20px;
    margin-left: 30px;
    margin-top: 70px;
    font-size: 24px;
    color: #2e2f2a;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px;
    img {
      width: 404px;
      margin-top: 30px;
    }
    .ptext {
      margin-top: 30px;
      height: 330px;
      overflow: hidden;
    }
    .ptwo {
      font-size: 28px;
      color: #1688fd;
      margin-top: 20px;
    }
  }
  .snabu {
    width: 690px;
    margin-top: 30px;
    margin-left: 30px;
  }
  .anosynopsis {
    width: 690px;
    height: 890px;
    background-color: #ffffff;
    border-radius: 20px;
    margin-left: 30px;
    margin-top: 70px;
    font-size: 24px;
    color: #2e2f2a;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px;
    img {
      width: 404px;
      margin-top: 30px;
    }
    .ptext {
      margin-top: 30px;
      height: 330px;
      overflow: hidden;
    }
    .ptext1 {
      margin-top: 30px;
      height: 630px;
    }
    .ptwo {
      font-size: 28px;
      color: #1688fd;
      margin-top: 20px;
    }
  }
  .cityquanyi {
    background-image: url(../../../assets/images/recommend/quanyi.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 690px;
    height: 1385px;
    margin-left: 30px;
    margin-top: 37px;
  }
  .cityquanyi::before {
    content: '';
    display: table;
  }
  .actbtn {
    width: 111px;
    margin-top: 800px;
    margin-left: 583px;
  }
  .firbtn {
    width: 690px;
    height: 88px;
    background-color: #faeb03;
    border-radius: 44px;
    margin-left: 30px;
    margin-top: 20px;
    font-size: 32px;
    color: #fe0101;
    text-align: center;
    line-height: 88px;
  }
  // .firbtn {
  //   width: 690px;
  //   height: 88px;
  //   background-color: #faeb03;
  //   border-radius: 44px;
  //   margin-left: 30px;
  //   margin-top: 100px;
  //   font-size: 32px;
  //   color: #fe0101;
  //   text-align: center;
  //   line-height: 88px;
  // }
  .twobtn {
    width: 690px;
    height: 88px;
    background-color: transparent;
    border: solid 2px #faeb03;
    border-radius: 44px;
    margin-left: 30px;
    margin-top: 30px;
    font-size: 32px;
    color: #faeb03;
    text-align: center;
    line-height: 88px;
  }
  .detailscro {
    width: 131px;
    position: fixed;
    top: 970px;
    right: 30px;
  }
  .record {
    width: 690px;
    height: 31px;
    margin: 30px auto;
    font-size: 32px;
    color: #ffffff;
    text-align: center;
  }
  .rulebtn {
    width: 217px;
    height: 54px;
    background-image: linear-gradient(132deg, #ffba00 0%, #ffec34 100%),
      linear-gradient(#66c6bb, #66c6bb);
    background-blend-mode: normal, normal;
    border-radius: 27px;
    // margin-top: 350px;
    margin-top: 310px;
    margin-left: 387px;
    font-size: 28px;
    line-height: 54px;
    text-align: center;
  }
  .rulebtn1 {
    width: 217px;
    height: 54px;
    background-image: linear-gradient(132deg, #ffba00 0%, #ffec34 100%),
      linear-gradient(#66c6bb, #66c6bb);
    background-blend-mode: normal, normal;
    border-radius: 27px;
    margin-top: 515px;
    margin-left: 387px;
    font-size: 28px;
    line-height: 54px;
    text-align: center;
  }
  .topbtn {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 579px;
    padding-left: 30px;
    padding-right: 30px;
    :first-child {
      margin-top: 13px;
      width: 131px;
      height: 96px;
    }
    :nth-child(2) {
      width: 127px;
      height: 127px;
    }
  }
  .title {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    img {
      width: 375px;
      height: 62px;
    }
    p {
      font-size: 28px;
      color: #ffffff;
      margin-top: 10px;
    }
  }
  .gift {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    img {
      width: 679px;
      height: 257px;
      margin-top: 30px;
    }
  }
  .mask {
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    position: fixed;
    top: 0;
    left: 0;
    .crow {
      width: 170px;
      position: absolute;
      top: 20px;
      right: 30px;
    }
    .pcrow {
      color: #fff;
      font-size: 30px;
      position: absolute;
      top: 170px;
      right: 80px;
    }
    .user_phone {
      width: 601px;
      height: 800px;
      background-color: #ffffff;
      border-radius: 10px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      .toline {
        width: 500px;
        height: 1px;
        background-color: #d9d9d9;
        margin-left: 30px;
      }
      .title {
        width: 100%;
        text-align: center;
        font-size: 32px;
        letter-spacing: 3px;
        color: #666666;
        padding-top: 67px;
        margin-bottom: 60px;
      }
      .bottom_text {
        display: flex;
        flex-direction: row;
        font-size: 24px;
        color: #fe0202;
        width: 500px;
        margin-left: 30px;
        margin-top: 20px;
        :first-child {
          width: 270px;
        }
      }
      .phone {
        padding-left: 30px;
        display: flex;
        height: 1.4rem;
        width: 100%;
        // border-bottom: 1px solid #d9d9d9;
        padding-bottom: 25px;
        img {
          width: 40px;
          display: block;
          align-self: center;
        }
        input {
          border: 0;
          padding-left: 34px;
          width: 80%;
          font-size: 24px;
        }
        ::-webkit-input-placeholder {
          color: #999999;
          font-size: 24px;
        }
      }
      .auth {
        padding-left: 30px;
        display: flex;
        height: 1.7rem;
        width: 100%;
        img {
          width: 40px;
          display: block;
          align-self: center;
        }
        input {
          border: 0;
          padding-left: 34px;
          width: 55%;
          font-size: 24px;
          // height: 100px;
        }
        ::-webkit-input-placeholder {
          color: #999999;
          font-size: 24px;
        }
        .get_auth {
          position: absolute;
          top: 530px;
          right: 20px;
          width: 190px;
          height: 65px;
          border-radius: 5px;
          border: solid 2px #59b7f5;
          text-align: center;
          line-height: 65px;
          font-size: 24px;
          color: #59b7f5;
          z-index: 100;
          // margin-left: 30px;
        }
        .read_time {
          align-self: center;
          width: 190px;
          height: 65px;
          border-radius: 5px;
          border: solid 2px #999999;
          text-align: center;
          line-height: 65px;
          font-size: 24px;
          color: #999999;
        }
      }
    }
    .bottom_text {
      display: flex;
      flex-direction: row;
      font-size: 24px;
      color: #fe0202;
      width: 500px;
      margin-left: 30px;
      :first-child {
        width: 250px;
      }
    }
    .user_phone1 {
      width: 601px;
      height: 1130px;
      background-color: #ffffff;
      border-radius: 10px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      .toline {
        width: 500px;
        height: 1px;
        background-color: #d9d9d9;
        margin-left: 30px;
      }
      .title {
        width: 100%;
        text-align: center;
        font-size: 32px;
        letter-spacing: 3px;
        color: #666666;
        padding-top: 67px;
        margin-bottom: 60px;
      }
      .phone {
        padding-left: 30px;
        display: flex;
        height: 1.4rem;
        width: 100%;
        // border-bottom: 1px solid #d9d9d9;
        padding-bottom: 25px;
        select {
          width: 80%;
          border: 0;
          margin-left: 23px;
          background: #fff;
        }
        img {
          width: 40px;
          display: block;
          align-self: center;
        }
        input {
          border: 0;
          padding-left: 34px;
          width: 80%;
          font-size: 24px;
        }
        ::-webkit-input-placeholder {
          color: #999999;
          font-size: 24px;
        }
      }
      .auth {
        padding-left: 30px;
        display: flex;
        height: 1.7rem;
        width: 100%;
        img {
          width: 40px;
          display: block;
          align-self: center;
        }
        input {
          border: 0;
          padding-left: 34px;
          width: 55%;
          font-size: 24px;
          // height: 100px;
        }
        ::-webkit-input-placeholder {
          color: #999999;
          font-size: 24px;
        }
        .get_auth {
          position: absolute;
          top: 530px;
          right: 20px;
          width: 190px;
          height: 65px;
          border-radius: 5px;
          border: solid 2px #59b7f5;
          text-align: center;
          line-height: 65px;
          font-size: 24px;
          color: #59b7f5;
          z-index: 100;
          // margin-left: 30px;
        }
        .read_time {
          align-self: center;
          width: 190px;
          height: 65px;
          border-radius: 5px;
          border: solid 2px #999999;
          text-align: center;
          line-height: 65px;
          font-size: 24px;
          color: #999999;
        }
      }
    }
    .user_phone2 {
      width: 601px;
      height: 1020px;
      background-color: #ffffff;
      border-radius: 10px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      .toline {
        width: 500px;
        height: 1px;
        background-color: #d9d9d9;
        margin-left: 30px;
      }
      .title {
        width: 100%;
        text-align: center;
        font-size: 32px;
        letter-spacing: 3px;
        color: #666666;
        padding-top: 67px;
        margin-bottom: 60px;
      }
      .phone {
        padding-left: 30px;
        display: flex;
        height: 1.4rem;
        width: 100%;
        // border-bottom: 1px solid #d9d9d9;
        padding-bottom: 25px;
        select {
          width: 80%;
          border: 0;
          margin-left: 23px;
          background: #fff;
        }
        img {
          width: 40px;
          display: block;
          align-self: center;
        }
        input {
          border: 0;
          padding-left: 34px;
          width: 80%;
          font-size: 24px;
        }
        ::-webkit-input-placeholder {
          color: #999999;
          font-size: 24px;
        }
      }
      .auth {
        padding-left: 30px;
        display: flex;
        height: 1.7rem;
        width: 100%;
        img {
          width: 40px;
          display: block;
          align-self: center;
        }
        input {
          border: 0;
          padding-left: 34px;
          width: 55%;
          font-size: 24px;
          // height: 100px;
        }
        ::-webkit-input-placeholder {
          color: #999999;
          font-size: 24px;
        }
        .get_auth {
          position: absolute;
          top: 530px;
          right: 20px;
          width: 190px;
          height: 65px;
          border-radius: 5px;
          border: solid 2px #59b7f5;
          text-align: center;
          line-height: 65px;
          font-size: 24px;
          color: #59b7f5;
          z-index: 100;
          // margin-left: 30px;
        }
        .read_time {
          align-self: center;
          width: 190px;
          height: 65px;
          border-radius: 5px;
          border: solid 2px #999999;
          text-align: center;
          line-height: 65px;
          font-size: 24px;
          color: #999999;
        }
      }
    }
    .sure_btn {
      width: 460px;
      height: 80px;
      background-color: #59b7f5;
      border-radius: 10px;
      margin: 0 auto;
      font-size: 30px;
      line-height: 80px;
      letter-spacing: 3px;
      color: #ffffff;
      text-align: center;
      margin-top: 30px;
    }
    .turn_off {
      width: 44px;
      height: 44px;
      right: 27px;
      position: absolute;
      top: 30px;
    }
    .waititem {
      width: 601px;
      height: 312px;
      background-color: #ffffff;
      border-radius: 10px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      .items {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 601px;
        height: 213px;
        border-bottom: 1px solid #d9d9d9;
        :first-child {
          font-size: 30px;
          color: #282828;
        }
        :nth-child(2),
        :nth-child(3) {
          margin-top: 20px;
          font-size: 26px;
          color: #282828;
        }
      }
    }
    .waititem1 {
      width: 601px;
      height: 312px;
      background-color: #ffffff;
      border-radius: 10px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      .items {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 601px;
        height: 213px;
        border-bottom: 1px solid #d9d9d9;
        font-size: 30px;
        color: #282828;
      }
    }
    .itembtn {
      height: 98px;
      line-height: 98px;
      text-align: center;
      font-size: 36px;
      color: #54c5ff;
    }
  }
  .act_toast {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1000;
    .toast_item {
      width: 100%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .toast_img {
        width: 100%;
      }
      .toastitem {
        width: 435px;
        height: 80px;
        background-image: linear-gradient(
            180deg,
            #f68934 0%,
            #81857c 0%,
            #0c80c4 0%,
            #86b4b5 0%,
            #ffe8a6 0%,
            #fdc249 100%
          ),
          linear-gradient(#7408d6, #7408d6);
        background-blend-mode: normal, normal;
        box-shadow: 0px 5px 24px 0px rgba(167, 7, 45, 0.45);
        border-radius: 40px;
        margin-top: -80px;
        font-size: 32px;
        color: #e9153e;
        text-align: center;
        line-height: 80px;
      }
      .toastitem1 {
        width: 435px;
        height: 80px;
        border-width: 2px;
        border: 2px solid #fdc249;
        margin-top: 20px;
        border-radius: 40px;
        font-size: 32px;
        color: #fdc249;
        text-align: center;
        line-height: 80px;
      }
    }
  }
}
.main::before {
  content: '';
  display: table;
}
</style>
